<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#ditu{
			width: 1200px;
			height: 600px;
			border: 1px solid red;
		}
	</style>
	<script text="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=p9yOmlaeIxGWiggWZtX6zMZmeEwYcauR"></script>
	<body>
		<div id="ditu"></div>
	</body>
	<script>
		//1.创建地图实例
		var map = new BMap.Map("ditu");
		
		//2.设置中心点坐标 BMap命名空间下的Point类来创建一个坐标点
		
		var point = new BMap.Point(116.404,39.915);
		
		//3.地图初始化，同时设置地图展示级别(3-19)
		
		map.centerAndZoom(point, 16);
		
		//4.鼠标滚轮 开启鼠标滚轮缩放
		
		map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
		
		//5.添加控件
		//平移缩放控件 NavigationControl PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能 
		
		map.addControl(new BMap.NavigationControl());
		
		//缩略地图 0verviewMapcontrol 默认位于地图右下方，是一个可折叠的缩略地图
		
		map.addControl(new BMap.OverviewMapControl());
		
		//比例尺 ScaleControl 默认位于地图左下方，显示地图的比例关系
		
		map.addControl(new BMap.ScaleControl());
		
		//地图类型 MapTypecontro1 默认位于地图右上方
		
		map.addControl(new BMap.MapTypeControl());
		
		var opts ={//将调整平移缩放地图控件的外观。
			offset:new BMap.Size(150, 5),
			anchor:BMAP_ANCHOR_TOP_RIGHT,//位置
			type:BMAP_NAVIGATION_CONTROL_SMALL//类型
		}
		map.addControl(new BMap.NavigationControl(opts));
		
		var marker = new BMap.Marker(point);        // 创建标注    
		map.addOverlay(marker); 
		
		  // 创建图标对象   
		    var myIcon = new BMap.Icon("img/idea.png", new BMap.Size(30, 40),{
				anchor: new BMap.Size(20, 30),//图片经纬度位置
				imageOffset: new BMap.Size(0,1)//图片大小
			});    
		    var marker =new BMap.Marker(point,{icon: myIcon});
		    map.addOverlay(marker);  
			
		    marker.addEventListener("click", function(){    
		        alert("您点击了标注");    
		    });

			var opts = {    
				width : 250,     // 信息窗口宽度    
				height: 100,     // 信息窗口高度    
				title : "Hello"  // 信息窗口标题   
			}  
			  
			var infoWindow = new BMap.InfoWindow("百度地图", opts);  // 创建信息窗口对象    
			map.openInfoWindow(infoWindow, map.getCenter());//打开地图窗口 map.getCenter()地图中心
	</script>
</html>
